<template>
  <VCharts v-if="renderChart" :option="option" :autoresize="autoResize" :style="{ width, height }" />
</template>

<script setup>
import { ref, nextTick } from 'vue';
import VCharts from 'vue-echarts';
import { useWindowResize } from '@/hooks/use-windows-resize'

const props = defineProps({
  option: {
    type: Object,
    default() {
      return {};
    },
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
});
console.log(`props.option 👉`,props.option)
const renderChart = ref(false);
nextTick(() => {
  renderChart.value = true;
});
useWindowResize(() => {
  renderChart.value = false;
  nextTick(() => {
    renderChart.value = true;
  });
})
</script>
